<!--
 * @Author: 王鹏 2911783749@qq.com
 * @Date: 2022-11-08 10:34:07
 * @LastEditors: 王鹏 2911783749@qq.com
 * @LastEditTime: 2022-11-08 15:43:15
 * @FilePath: \vue3Mixiu\code\src\components\HeadNav.vue
 * @Description: 首页头部组件
-->
<template>
  <div class="head_nav">
    <el-row>
      <el-col :span="12" class="logo-container">
        <img src="../assets/img/logo.png" alt="" class="logo" />
        <span class="title">米修在线后台管理系统</span>
      </el-col>
      <el-col :span="12" class="user">
        <div class="userInfo">
          <div class="welcome">
            <p class="name comename">欢迎</p>
            <p class="name avatarname">admin</p>
          </div>
          <el-dropdown trigger="click" @command="handleCommand">
            <span class="el-dropdown-link">      
              <el-icon class="el-icon--right" color="#fff">
                <arrow-down />
              </el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="info">个人信息</el-dropdown-item>
                <el-dropdown-item command="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script lang="ts" setup>
import { ArrowDown } from '@element-plus/icons-vue'
import {userAuth} from '../store'
const store = userAuth()
import router from '../router/index'
const handleCommand=(com:string)=>{
    console.log(com);
    switch(com){
        case "info":
            showInfoList();
            break;
            case "logout":
                logout();
                break;
    }
}
const showInfoList=()=>{
    // 跳转到个人信息页面
}
const logout=()=>{
    sessionStorage.removeItem('token')
    store.setUser(null)
    router.push('/login')
}
</script>
<style scoped>
.head_nav {
  width: 100%;
  height: 60px;
  background: #324057;
  min-width: 600px;
  padding: 0 5px;
  color: #fff;
  border-bottom: 1px solid #1f2d3d;
}
.logo-container {
  line-height: 55px;
  min-width: 400px;
}
.logo {
  width: 50px;
  height: 50px;
  margin-right: 5px;
  vertical-align: middle;
}
.title {
  vertical-align: middle;
  font-size: 22px;
  font-family: "微软雅黑";
  letter-spacing: 3px;
}
.user {
  line-height: 60px;
  text-align: right;
  float: right;
  padding: 10px;
  padding-top: 0px;
}
.welcome {
  display: inline-block;
  width: auto;
  vertical-align: middle;
  padding: 5px;
}
.name {
  line-height: 20px;
  text-align: center;
  font-size: 14px;
}
.comename {
  font-size: 12px;
}
.avatarname {
  color: #409eff;
  font-weight: bold;
}
.el-dropdown{
    margin-top: 25px;
}
</style>